<template>
  <div class="newshop-list">
    <Row type="flex"
         justify="space-between"
         class="coinrevenue-list-edit">
      <Form style="width: 100%"
            class="from"
            :model="searchObj"
            label-position="left"
            inline>
        <Row type="flex"
             justify="start"
             inline>
          <Col span="22">
          <Row>
            <!-- <Col>
              </Col>-->

            <FormItem :label-width="48">
              <div slot="label"
                   style="transform: translateX(12px);">时间：</div>
              <datePickerYmd @on-change="search"
                             :dateOption='dateOption'
                             :selectDateType.sync="selectDateType "
                             v-model="timeDate"></datePickerYmd>
            </FormItem>

            <!-- <FormItem :label-width="72">
                <div slot="label" style="transform: translateX(12px);">门店名称：</div>
                <Select
                  class="select-shop-item"
                  v-model="searchObj.shopId"
                  filterable
                  @on-change="search"
                  :max-tag-count="1"
                  :max-tag-placeholder="maxTagPlaceholder"
                  style="width:180px"
                >
                  <Option
                    v-for="item in shopList"
                    :value="item.shopId"
                    :key="item.shopId"
                  >{{ item.shopName }}</Option>
                </Select>
              </FormItem> -->

            <FormItem :label-width="72">
              <div slot="label"
                   style="transform: translateX(12px);">门店名称：</div>
              <!-- <vueTreeselectChoice
                  :disable-branch-nodes="true"
                   @input='search'
                   :clearable='false'
                  permissionCode="moms:report:viewtransferrecord"
                  v-model="searchObj.shopId"
                  @on-api-finish="apiFinish"
                ></vueTreeselectChoice> -->
              <vueTreeselectChoice :max-tag-count='1'
                                   componentsType='iselect'
                                   :filterable="true"
                                   @on-change="search"
                                   permissionCode="moms:report:viewtransferrecord"
                                   v-model="searchObj.shopId"></vueTreeselectChoice>
            </FormItem>

            <FormItem :label-width="84">
              <div slot="label"
                   style="transform: translateX(12px);">新会员编号：</div>
              <Input autocomplete="off"
                     v-model="searchObj.memberId"
                     placeholder="请输入" />
            </FormItem>
            <FormItem>
              <Button type="primary"
                      class="coinrevenue-btn"
                      @click="search">查询</Button>
            </FormItem>
          </Row>
          <Row>
            <FormItem v-show="shosMoreSearch"
                      :label-width="84">
              <div slot="label"
                   style="transform: translateX(12px);">原会员编号：</div>
              <Input autocomplete="off"
                     v-model="searchObj.originMemberId"
                     placeholder="请输入" />
            </FormItem>
          </Row>
          </Col>
          <Col span="2">
          <Row type="flex"
               justify="end"
               class="code-row-bg">
            <Col>
            <FormItem>
              <Button style="margin-left: 10px"
                      @click="shosMoreSearch = !shosMoreSearch "
                      class="coinrevenue-btn2 concrete-data">
                {{ shosMoreSearch ? '收起筛选' : '更多筛选' }}
                <Icon :type=" shosMoreSearch? 'ios-arrow-up' : 'ios-arrow-down' " />
              </Button>
            </FormItem>
            </Col>
          </Row>
          </Col>
        </Row>
      </Form>
    </Row>
    <!-- :loading="isloading" -->
    <div class="newshop-search">
      <div style="margin-right:50px;"><span>查询结果：</span></div>
      <div class="newshop-search-item"><span>转卡数量(次)：{{list.recordsCount}}</span></div>
      <div class="newshop-search-item"><span>消费总额(元)：{{formatAmount(returnFloat(list.totalAmount))}}</span></div>
      <div class="newshop-search-item"><span>押金总额(元)：{{formatAmount(returnFloat(list.totalDeposit))}}</span></div>
      <div class="newshop-search-item"><span>游戏币总数(枚)：{{list.totalCoin}}</span></div>
      <div class="newshop-search-item"><span>彩票总数(张)：{{list.totalTicket}}</span></div>
    </div>
    <Table :loading="isloading"
           border
           stripe
           ref="rowSpanTable"
           :columns="columns"
           :data="resData">
      <template slot-scope="{ row, }"
                slot="targetMemberType">
        <div>{{ ['会员', '非会员'][row.targetMemberType] }}</div>
      </template>
      <template slot-scope="{ row, }"
                slot="originMemberType">
        <div>{{ ['会员', '非会员'][row.originMemberType] }}</div>
      </template>
      <template slot-scope="{ row, }"
                slot="status">
        <div>{{ ['未迁移', '已迁移'][row.status] }}</div>
      </template>
    </Table>
    <div class="page-box"
         style="margin-top: 20px">
      <Page :total="total"
            ref="pages"
            :current.sync="searchObj.pageIndex"
            :page-size="searchObj.limit"
            @on-change="handlePage"
            @on-page-size-change="handlePageSize"
            show-sizer
            show-total />
    </div>
  </div>
</template>
<script>
// import { rowSpanTable, formatRowspanData } from '@/libs/rowspan'
import { newShopPage, shopTransferMember } from '@/api/report/shop'
import { Decimal } from 'decimal.js'
import dayjs from 'dayjs'
import { formatAmount, returnFloat } from '@/libs/tools'
import datePickerYmd from '@/components/date-picker-ymd/date-picker-ymd.vue'
import vueTreeselectChoice from '@/components/vue-treeselect-choice'
export default {
  name: 'report_shop_newshop',
  components: {
    datePickerYmd,
    vueTreeselectChoice
    // vueTreeselectShop
  },
  data () {
    return {
      shopList: [],
      total: 0,
      reducedAmountTotal: 0,
      returnFloat: returnFloat,
      formatAmount: formatAmount,
      depositTotal: 0,
      coinTotal: 0,
      ticketTotal: 0,
      isloading: false,
      bottonActive: '日',
      timeDate: [dayjs().format('YYYY-MM-DD 00:00:00'), dayjs().format('YYYY-MM-DD 00:00:00')],
      selectDateType: 'daterange',
      list: {
        totalAmount: '',
        totalDeposit: '',
        totalCoin: '',
        totalTicket: '',
        recordsCont: ''
      },
      searchObj: {
        offset: 0,
        limit: 10,
        pageIndex: 1,
        shopId: '',
        memberId: '',
        originMemberId: ''
      },
      dataArr: [],
      dateOption: {
        disabledDate (date) {
          return dayjs(date).isAfter(dayjs(new Date()))
        }
      },
      shosMoreSearch: true,
      model10: [],
      columns: [
        { title: '门店', key: 'targetShopName', align: 'center', width: 185, fixed: 'left' },
        { title: '转卡时间', key: 'createTime', align: 'center', width: 185 },
        { title: '新会员编号', key: 'targetMemberId', align: 'center', width: 185 },
        { title: '会员类型', key: 'targetMemberType', align: 'center', slot: 'targetMemberType', width: 185 },
        { title: '会员姓名', key: 'memberName', align: 'center', width: 185 },
        {
          title: '消费金额',
          key: 'reducedAmount',
          align: 'center',
          width: 185,
          render: (h, params) => {
            return h('span', formatAmount(returnFloat(params.row.reducedAmount)))
          }
        },
        {
          title: '押金',
          key: 'deposit',
          align: 'center',
          width: 185,
          render: (h, params) => {
            return h('span', formatAmount(params.row.deposit))
          }
        },
        { title: '游戏币', key: 'coin', align: 'center', width: 185 },
        { title: '彩票', key: 'ticket', align: 'center', width: 185 },
        { title: '状态', key: 'status', align: 'center', slot: 'status', width: 185 },
        { title: '操作人', key: 'creatorName', align: 'center', width: 185 },
        { title: '收银点', key: 'createPosName', align: 'center', width: 185 },
        { title: '原会员编号', key: 'originMemberId', align: 'center', width: 185 },
        { title: '原会员卡号', key: 'originCardNo', align: 'center', width: 185 },
        { title: '原会员类型', key: 'originMemberType', align: 'center', slot: 'originMemberType', width: 185 },
        { title: '原门店名称', key: 'originShopName', align: 'center', width: 185 }
      ],
      resData: []
    }
  },
  computed: {
    dateFormat () {
      if (this.bottonActive === '日') return 'yyyy-MM-dd'
      return 'yyyy-MM'
    },
    dateType () {
      if (this.bottonActive === '日') return 'date'
      return 'month'
    },
    startDate () {
      return this.timeDate[0]
    },
    endDate () {
      if (this.selectDateType === 'daterange') {
        return dayjs(this.timeDate[1])
          .add(1, 'day')
          .format('YYYY-MM-DD 00:00:00')
      }
      return this.timeDate[1]
    }
  },
  watch: {
    searchObj: {
      handler: function (val) {
        this.searchObj.offset = 0
      },
      deep: true
    }
  },
  async created () {
    if (this.$store.state.user.orgType === 1) {
      this.searchObj.shopId = this.$store.state.user.orgId
      this.shopTransferMember()
      this.newShopPage()
    }
  },
  mounted () {
  },
  methods: {
    apiFinish () {
      // if (this.$store.state.user.orgType === 1) {
      //   this.searchObj.shopId = this.$store.state.user.orgId
      // }
    },
    handlePage (val) {
      this.searchObj.offset = (val - 1) * this.searchObj.limit
      this.shopTransferMember()
      this.newShopPage()
    },
    handlePageSize (val) {
      this.searchObj.limit = val
      this.searchObj.offset = 0
      this.shopTransferMember()
      this.newShopPage()
    },
    async shopTransferMember (
      params = {
        merchantId: this.$store.state.user.merchantId,
        shopId: this.searchObj.shopId,
        start: this.startDate,
        end: this.endDate,
        offset: this.searchObj.offset,
        limit: this.searchObj.limit
      }
    ) {
      try {
        const res = await shopTransferMember(params)
        if (res.data.status !== 200) return this.$Message.error(`${res.data.error}`)
        this.list = res.data.data
        // this.resData = [Object.assign({}, { shopName: data.shopName }, obj)]
      } catch (error) {
        this.$Message.error(`${error}`)
      }
    },
    async newShopPage (
      params = {
        merchantId: this.$store.state.user.merchantId,
        ...this.searchObj,
        start: this.startDate,
        end: this.endDate
      }
    ) {
      this.isloading = true
      try {
        const res = await newShopPage(params)
        this.isloading = false
        if (res.data.status !== 200) return this.$Message.error(`${res.data.error}`)
        this.dataArr = res.data.data || []
        this.reducedAmountTotal = 0
        this.depositTotal = 0
        this.coinTotal = 0
        this.ticketTotal = 0
        if (this.dataArr.length) {
          this.dataArr.forEach(ele => {
            this.reducedAmountTotal = new Decimal(this.reducedAmountTotal).add(ele.reducedAmount).toFixed(2)
            this.depositTotal = new Decimal(this.depositTotal).add(ele.deposit).toFixed(2)
            this.coinTotal = new Decimal(this.coinTotal).add(ele.coin)
            this.ticketTotal = new Decimal(this.ticketTotal).add(ele.ticket)
          })
          this.dataArr.push({
            targetShopName: '小计',
            reducedAmount: this.reducedAmountTotal,
            deposit: this.depositTotal,
            coin: this.coinTotal,
            ticket: this.ticketTotal
          })
        }
        this.resData = this.dataArr
        this.total = res.data.totalCount
        // this.resData = [Object.assign({}, { shopName: data.shopName }, obj)]
      } catch (error) {
        this.isloading = false
        this.$Message.error(`${error}`)
      }
    },

    search () {
      if (!this.searchObj.shopId) return this.$Message.error(`${'请选择门店'}`)
      this.searchObj.pageIndex = 1
      this.searchObj.offset = 0
      this.shopTransferMember()
      this.newShopPage()
    }
  }
}
</script>
<style lang="less" scoped>
.newshop-list {
  min-width: 1096px;
  // .from {
  //   margin-top: 24px;
  // }
  .coinrevenue-list-edit {
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: -4px;
  }
  .newshop-search-item {
    margin-right: 100px;
  }
  .button_active {
    border: 1px solid #2d8cf0;
  }
  .newshop-search {
    display: flex;
    padding: 20px;
    padding-left: 34px;
    padding-top: 0;
  }
}
</style>
